var MonitorDetail = function () {
  var template = /*html*/ `
    <div class="monitor-detail" v-loading="loading">
      <div class="monitor-detail-table">
        <electrical-monitor-table :machine-data="machineData" type="detail"></electrical-monitor-table>
      </div>
      <div class="monitor-detail-table" style="margin-top:30px;">
        <machine-dynamic-table :dynamics="dynamics"></machine-dynamic-table>
      </div>
    </div>
  `;

  return {
    props: {
      machine: {
        type: Object,
        required: true
      }
    },
    data: function () {
      return {
        loading: false,
        machineData: [],
        dynamics: []
      };
    },
    created: function () {
      this.setMachineData();
      this.setDynamics();
    },
    methods: {
      setMachineData: function () {
        var machine = this.machine;

        this.loading = true;
        var self = this;
        ajaxRequest('equipment/getEcsMonitor', {
          equipmentNo: machine.equipmentNo
        }).then(function (res) {
          self.loading = false;
          var machineData = res.returnData;
          for (var i = 0; i < machineData.length; i++) {
            var machine = machineData[i];
            var useElectric = machine.useElectric;
            if (useElectric !== null) {
              useElectric *= 1000;
            }
            machine.useElectric = SysUtil.decimalNumber(useElectric);
            var useGas = machine.useGas;
            machine.useGas = SysUtil.decimalNumber(useGas);

            var thisYield = machine.thisYield;
            machine.avgElectric = SysUtil.getAvgData(useElectric, thisYield, 4);
            machine.avgGas = SysUtil.getAvgData(useGas, thisYield, 4);
          }
          self.machineData = machineData;
        }).catch(function () {
          self.loading = false;
        });
      },

      setDynamics: function () {
        var machine = this.machine;

        this.loading = true;
        var self = this;
        var startTime = moment().startOf('day').valueOf();
        var endTime = moment().endOf('day').valueOf();
        ajaxRequest('equipment/getEquipmentCropMobility',{
          equipmentNo: machine.equipmentNo,
          startTime:startTime,
          endTime:endTime
        }).then(function(res){
          self.loading = false;
          var dynamics = res.returnData;
          for (var i = 0; i < dynamics.length; i++) {
            var dynamic = dynamics[i];
            var timeField = ['machingTime', 'offTime', 'waitTime'];
            SysUtil.formatString2Number(dynamic, timeField);

            var usedRate;
            var machingTime = dynamic.machingTime;
            if (machingTime === '') {
              usedRate = '';
            } else {
              var totalTime = _.sumBy(timeField, function (field) {
                var value = dynamic[field];
                if (value === '') {
                  return 0;
                }
                return value;
              });
              if (totalTime === 0) {
                usedRate = '';
              } else {
                usedRate = _.round(machingTime / totalTime * 100, 2);
              }
            }
            dynamic.usedRate = usedRate;

            var qualifiedRate;
            var machingCount = dynamic.machingCount;
            if (machingCount === null) {
              machingCount = 0;
            }
            if (machingCount === 0) {
              qualifiedRate = '';
            } else {
              var unqualifiedCount = dynamic.unqualifiedCount;
              if (unqualifiedCount === null) {
                unqualifiedCount = 0;
              }
              qualifiedRate = _.round((machingCount - unqualifiedCount) / machingCount * 100, 2);
            }
            dynamic.qualifiedRate = qualifiedRate;
          }
          self.dynamics = dynamics;
        }).catch(function(){
          self.loading = false;
        });
      }
    },
    components: {
      ElectricalMonitorTable: ElectricalMonitorTable,
      MachineDynamicTable:MachineDynamicTable
    },
    template: template
  };
}();